/*
 * @Author: shawnxiao 597035529@qq.com
 * @Date: 2022-11-15 22:50:54
 * @LastEditors: shawnxiao 597035529@qq.com
 * @LastEditTime: 2022-11-26 19:21:25
 * @FilePath: \react\webpack5-ts-react18\src\App.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { lazy, Suspense, useState } from 'react'
// import '@/app.css'
import '@/app.less'

import Class from './components/Class'
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Demo1, Demo2 } from '@/components'
const LazyDemo = lazy(() => import('@/components/LazyDemo')) // 使用import语法配合react的Lazy动态引入资源

// prefetch
const PreFetchDemo = lazy(() => import(
  /* webpackChunkName: "PreFetchDemo" */
  /* webpackPrefetch: true*/
  '@/components/PreFetchDemo'
))
// preload
const PreloadDemo = lazy(() => import(
  /* webpackChunkName: "PreloadDemo" */
  /* webpackPreload: true*/
  '@/components/PreloadDemo'
 ))

import smallImg from '@/assets/imgs/5kb.png'
import bigImg from '@/assets/imgs/22kb.png'

function App() {
  console.log('NODE_ENV', process.env.NODE_ENV, process.env.BASEURL)
  console.log('BASE_ENV', process.env.BASE_ENV)
  const [ count, setCounts ] = useState('')
  const [ show, setShow ] = useState(false)

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onChange = (e: any) => {
    setCounts(e.target.value)
  }

  // 点击事件中动态引入css, 设置show为true
  const onClick = () => {
    import('./app.css')
    setShow(true)
  }

  return <>
    <h2>webpack5-ts-react18</h2>
    <Demo1 />
    <Suspense fallback={null}><PreloadDemo /></Suspense>
    <Suspense fallback={null}><PreFetchDemo /></Suspense>
    <Class />
    <h2 onClick={onClick}>展示</h2>
    {/* show为true时加载LazyDemo组件 */}
    { show && <Suspense fallback={null}><LazyDemo /></Suspense> }
    <p>受控组件</p>
    <input type="text" value={count} onChange={onChange} />
    <br />
    <p>非受控组件</p>
    <input type="text" />
    <img src={smallImg} alt="小于10kb的图片" />
    <img src={bigImg} alt="大于于10kb的图片" />
    <div className='small-img'></div> {/* 小图片背景容器 */}
    <div className='big-img'></div> {/* 大图片背景容器 */}
  </>
}
export default App
